<template>
	<view class="content">
		<!-- 顶部个人信息 -->
		<view class="topHeader_fixed" v-if="showHeaders">
		</view>
		<view class="topHeader">
		</view>
		<view class="my_state">
			<!-- 图标 -->
			<!-- 头像  昵称 -->
			<view class="myImg">
				<view class="myImg_left">
					<image class="u_img" src="/static/images/my_header.png">
					</image>
				</view>
				<view class="myImg_right">
					<view class="myImg_right_name">
						kkk
					</view>
					<view class="myImg_right_name_int">
						积分兑好礼
					</view>
				</view>
			</view>
			<view class="icon_right">
				<view class="seconds">
					<view class="secondstop">
						<view class="icon_right_one">
							<image src="../../static/images/rights.png" class="heiSet"></image>
						</view>
						<view class="icon_right_ones">
							<image src="../../static/images/rights.png" class="heiSet"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="my_class">
			<!-- 积分 -->
			<view class="integral">
				<view class="int_son">
					<image class="int_son_img" src="../../static/images/my_header.png"></image>
					<view class="int_son_text">
						12000积分
					</view>
				</view>
				<view class="int_son">
					<image class="int_son_img" src="../../static/images/my_header.png"></image>
					<view class="int_son_text">
						购物车
					</view>
				</view>
				<view class="int_son">
					<image class="int_son_img" src="../../static/images/my_header.png"></image>
					<view class="int_son_text">
						优惠券
					</view>
				</view>
				<view class="int_son">
					<image class="int_son_img" src="../../static/images/my_header.png"></image>
					<view class="int_son_text">
						关注
					</view>
				</view>
			</view>
			<!-- 帮助中心 -->
			<view class="helper">
				<view class="helper_header">
					<view class="helper_header_name">
						帮助中心
					</view>
					<view class="helper_header_right">
						全部订单<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="integral">
					<view class="int_son">
						<image class="int_son_img" src="../../static/images/my_header.png"></image>
						<view class="int_son_text">
							待付款
						</view>
					</view>
					<view class="int_son">
						<image class="int_son_img" src="../../static/images/my_header.png"></image>
						<view class="int_son_text">
							待发货
						</view>
					</view>
					<view class="int_son">
						<image class="int_son_img" src="../../static/images/my_header.png"></image>
						<view class="int_son_text">
							待收货
						</view>
					</view>
					<view class="int_son">
						<image class="int_son_img" src="../../static/images/my_header.png"></image>
						<view class="int_son_text">
							待评价
						</view>
					</view>
				</view>

			</view>
			<!-- 车辆信息 -->
			<view class="carState">
				<view class="helper">
					<view class="carState_state">
						<view class="helper_header_state">
							<view class="helper_header_state_l">
								<image src="../../static/images/my_header.png" mode=""></image>
							</view>
							<view class="helper_header_state_r">
								<view class="car_names">
									宝马I8
								</view>
								<view class="car_detailnames">
									2020款 极夜流星限定版
								</view>
							</view>
						</view>
						<view class="helper_header_right">
							更换车辆<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="integral">
						<view class="int_son">
							<view class="intSon_progress">
								<view class="intSon_progress_text">
									0%
								</view>
								<view class="intSontext_zero">
									已耗尽
								</view>
							</view>
							<view class="int_son_text">
								保养服务
							</view>
						</view>
						<view class="int_son">
							<view class="intSon_progress">
								<view class="intSon_progress_text_green">
									0%
								</view>
							</view>
							<view class="int_son_text">
								变速箱油
							</view>
						</view>
						<view class="int_son">
							<view class="intSon_progress">
								<view class="intSon_progress_text_green">
									0%
								</view>
							</view>
							<view class="int_son_text">
								火花塞
							</view>
						</view>
						<view class="int_son">
							<view class="intSon_progress">
								<view class="intSon_progress_text_green">
									0%
								</view>
							</view>
							<view class="int_son_text">
								刹车片
							</view>
						</view>
						<view class="int_son">
							<view class="intSon_progress">
								<view class="intSon_progress_text_green">
									0%
								</view>
							</view>
							<view class="int_son_text">
								刹车油
							</view>
						</view>
					</view>
					<view class="integral_botom">
						<u-button :hair-line="false" class="btn_detail">查看完整检测报告</u-button>
					</view>
				</view>
			</view>
			<!-- 特惠洗车 -->
			<washing></washing>
			<!-- 菜单功能 -->
			<view class="menu_bot">
				<view class="menu_bot_son">
					<view class="menu_bot_son_top">
						<image src="../../static/images/my_list_heart.png" class="img_son"></image>
					</view>
					<view class="menu_bot_son_bottom">
						爱车档案
					</view>
				</view>
				<view class="menu_bot_son">
					<view class="menu_bot_son_top">
						<image src="../../static/images/my_list_heart.png" class="img_son"></image>
					</view>
					<view class="menu_bot_son_bottom">
						保养记录
					</view>
				</view>
				<view class="menu_bot_son">
					<view class="menu_bot_son_top">
						<image src="../../static/images/my_list_heart.png" class="img_son"></image>
					</view>
					<view class="menu_bot_son_bottom">
						收藏商品
					</view>
				</view>
				<view class="menu_bot_son">
					<view class="menu_bot_son_top">
						<image src="../../static/images/my_list_heart.png" class="img_son"></image>
					</view>
					<view class="menu_bot_son_bottom">
						收货地址
					</view>
				</view>
				<view class="menu_bot_son">
					<view class="menu_bot_son_top">
						<image src="../../static/images/my_list_heart.png" class="img_son"></image>
					</view>
					<view class="menu_bot_son_bottom">
						我的心得
					</view>
				</view>
				<view class="menu_bot_son">
					<view class="menu_bot_son_top">
						<image src="../../static/images/my_list_heart.png" class="img_son"></image>
					</view>
					<view class="menu_bot_son_bottom">
						收到评论
					</view>
				</view>
				<view class="menu_bot_son">
					<view class="menu_bot_son_top">
						<image src="../../static/images/my_list_heart.png" class="img_son"></image>
					</view>
					<view class="menu_bot_son_bottom">
						意见反馈
					</view>
				</view>
				<view class="menu_bot_son">
					<view class="menu_bot_son_top">
						<image src="../../static/images/my_list_heart.png" class="img_son"></image>
					</view>
					<view class="menu_bot_son_bottom">
						分享好友
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		service,
		userInfo
	} from '../../utils/api.js'
	import washing from "../../component/clearcar.vue"
	export default {
		data() {
			return {
				topHeight: 0,
				showHeaders: false
			}
		},
		components: {
			washing
		},
		onLoad() {
			// let iconRight = uni.getSystemInfoSync()
			// this.topHeight = iconRight.statusBarHeight + 44
		},
		onPageScroll(res) {
			// console.log(res.scrollTop); //距离页面顶部距离
			this.topHeight = res.scrollTop
			if (this.topHeight > 50) {
				this.showHeaders = true
			} else {
				this.showHeaders = false
			}
		},
		// watch: {
		// 	topHeight() {
		// 		console.log(this.topHeight)
		// 		if (this.topHeight < 1) {
		// 			this.showHeaders = false
		// 		}
		// 	}
		// },
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f0f0f0;

		.topHeader_fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			height: 120rpx;
			width: 100%;
			background: url("../../static/images/dd2.jpg");
			background-position: right right;
		}

		.topHeader {
			height: 120rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 0 40rpx;
			box-sizing: border-box;
			background: url('../../static/images/my_header.png') no-repeat;
			background-position: right right;
		}

		.my_state {
			width: 100%;
			box-sizing: border-box;
			height: 250rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: red;
			border-radius: 0 0 20px 20px;
			background: url('../../static/images/my_header.png') no-repeat;
			background-position: right right;
			padding: 0 40rpx;

			.icon_right {
				display: flex;
				justify-content: flex-start;
				// height: 100%;

				.seconds {
					width: 140rpx;
					display: flex;

					.secondstop {
						width: 100%;
						display: flex;
						height: 50rpx;
						align-items: center;
						justify-content: flex-end;

						.icon_right_one {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;

							.heiSet {
								width: 100%;
								height: 100%;
							}
						}

						.icon_right_ones {
							width: 40rpx;
							height: 40rpx;

							.heiSet {
								width: 100%;
								height: 100%;
							}
						}
					}

				}
			}

			.myImg {
				height: 130rpx;
				display: flex;
				align-items: center;

				.myImg_left {
					height: 100%;
					margin: 30rpx;

					.u_img {
						border-radius: 50%;
						width: 125rpx;
						height: 125rpx;
						border: 2rpx solid #FFFFFF;
						box-shadow: 0rpx 0rpx 5rpx 0rpx #FFFFFF;
					}
				}

				.myImg_right {
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-around;

					.myImg_right_name {
						color: #FFFFFF;
						font-size: 29rpx;
						font-weight: 700;
					}

					.myImg_right_name_int {
						color: #FFFFFF;
						font-size: 22rpx;
					}
				}
			}
		}

		.my_class {
			width: 100%;
			padding: 0 15rpx 15rpx 15rpx;

			.integral {
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #FFFFFF;
				height: 170rpx;
				width: 100%;
				margin-top: -50rpx;
				border-radius: 10rpx;

				.int_son {
					display: flex;
					flex-direction: column;
					align-items: center;

					.int_son_img {
						width: 55rpx;
						height: 50rpx;
						margin-bottom: 10rpx;
					}

					.int_son_text {
						font-size: 24rpx;
						color: #2a2a2a;
					}
				}
			}

			.helper {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 240rpx;
				margin-top: 15rpx;
				border-radius: 10rpx;
				background-color: #FFFFFF;

				.integral {
					display: flex;
					justify-content: space-around;
					align-items: center;
					height: 170rpx;
					width: 100%;
					margin-top: -50rpx;

					.int_son {
						display: flex;
						flex-direction: column;
						align-items: center;

						.intSon_progress {
							display: flex;
							align-items: center;
							flex-direction: column;
							width: 110rpx;
							height: 110rpx;
							margin-bottom: 15rpx;
							border-radius: 55rpx;
							border: 4rpx solid #ededed;
							justify-content: center;

							.intSon_progress_text {
								font-size: 30rpx;
								color: #ff2500;
								font-weight: 700;
							}

							.intSon_progress_text_green {
								font-size: 29rpx;
								color: #449c17;
								font-weight: 700;
							}

							.intSontext_zero {
								font-size: 18rpx;
								color: #ff2500;
							}
						}

						.int_son_text {
							font-size: 24rpx;
							color: #2a2a2a;
						}
					}
				}

				.helper_header {
					width: 100%;
					padding: 0 40rpx;
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.helper_header_name {
						font-weight: 550;
						height: 40rpx;
						font-size: 33rpx;
						color: #000000;
					}

					.helper_header_right {
						color: #aeaeae;
						font-size: 24rpx;
					}

					.helper_header_right:hover {
						color: #fe2e00;
					}
				}
			}

			.carState {
				box-sizing: border-box;
				margin: 15rpx 0 0 0;
				background-color: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border-radius: 10rpx;

				.helper {
					box-sizing: border-box;
					display: flex;
					height: 400rpx;
					padding-bottom: 15rpx;
					flex-direction: column;
					justify-content: space-around;

					.integral {
						padding: 0 35rpx;
						display: flex;
						justify-content: space-around;
						align-items: center;
						margin-top: -50rpx;

						.int_son {
							display: flex;
							flex-direction: column;
							align-items: center;

							.int_son_img {
								width: 55rpx;
								height: 55rpx;
								margin-bottom: 10rpx;
							}

							.int_son_text {
								color: #2a2a2a;
							}
						}
					}

					.carState_state {
						width: 100%;
						padding: 0 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 70rpx;
						margin-bottom: 30rpx;

						.helper_header_state {
							display: flex;
							width: 500rpx;
							align-items: center;

							.helper_header_state_l {
								margin: 16rpx;

								image {
									width: 55rpx;
									height: 55rpx;
									border-radius: 50%;
								}
							}

							.helper_header_state_r {
								.car_names {
									font-size: 29rpx;
									color: #000000;
									font-weight: 900;
								}

								.car_detailnames {
									font-size: 22rpx;
								}
							}
						}

						.helper_header_right {
							font-size: 25rpx;
							color: #aeaeae;
						}

						.helper_header_right:hover {
							font-size: 25rpx;
							color: #fe2e00;
						}
					}

					.integral_botom {
						width: 100%;
						padding: 0 35rpx;

						.btn_detail /deep/ .u-btn {
							background-color: #fe2e00;
							border-color: #ffffff;
							color: #FFFFFF;
							border-radius: 50rpx;
							font-size: 29rpx;
						}

						.btn_detail /deep/ .u-btn.u-default-hover {
							background-color: #fe2e00 !important;
							border-color: #ffffff !important;
							color: #aeaeae !important;
							border-radius: 50rpx;
						}
					}
				}

			}

			.menu_bot {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				width: 100%;
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;


				.menu_bot_son {
					padding: 20rpx 10rpx;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					.menu_bot_son_top {
						.img_son {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.menu_bot_son_bottom {
						font-size: 24rpx;
						color: #4b4b4b;
					}
				}
			}
		}
	}
</style>
